import React from 'react';
import { Card, Form, Alert, Row, Col, Input, Button, Table, Tooltip, Descriptions, Steps, Modal } from 'antd';

import styles from './index.less';

import { FormInstance } from 'antd/es/form';

import { QuestionCircleOutlined } from '@ant-design/icons';

const { Step } = Steps;

const dataSource = [
	{key: 1}
];

const columns = [
	{
		title: '申请开票时间',
	    dataIndex: 'name',
	    key: 'name',
	    width: 170,
	    render: (_,item) => {
	    	return '2020-12-30 08:34:36'
	    }
	},
	{
		title: '金额',
	    dataIndex: 'name',
	    key: 'name',
	    width: 100,
	    render: (_,item) => {
	    	return '￥3940.00'
	    }
	},
	{
		title: '税额',
	    dataIndex: 'name',
	    key: 'name',
	    width: 100,
	    render: (_,item) => {
	    	return '￥39.40'
	    }
	},
	{
		title: '价税合计',
	    dataIndex: 'name',
	    key: 'name',
	    render: (_,item) => {
	    	return '￥3979.40'
	    }
	},
	{
		title: '发票抬头',
	    dataIndex: 'name',
	    key: 'name',
	    render: (_,item) => {
	    	return '河北悦思智信科技有限公司'
	    }
	},
	{
		title: '纳税人识别号',
	    dataIndex: 'name',
	    key: 'name',
	    render: (_,item) => {
	    	return '91130728MA09YUME7E'
	    }
	},
	{
		title: '状态',
	    dataIndex: 'name',
	    key: 'name',
	    render: (_,item) => {
	    	return '已邮寄（顺丰快递：SF6090641759033'
	    }
	}
];
const layout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 19 },
};

class Invoicing extends React.Component{
	state = {
		confirmLoading: false
	}
	formRef = React.createRef<FormInstance>();
	render(){
		const { visible } = this.props;
		const { confirmLoading } = this.state;
		return (
			<>
				<Modal
			        title="修改开票信息"
			        visible={visible}
			        width="700px"
			        onOk={() => { this.props.onCancel() }}
			        confirmLoading={confirmLoading}
			        onCancel={() => { this.props.onCancel() }}
			        footer={null}
			    > 
			    	<Alert
				      message="因税务新政要求，申请开具企业增值税普通发票时必须提供正确的“纳税人识别号”信息。"
				      type="warning"
				    />
				    <div style={{padding: '30px 30px'}}>
				    	<Form {...layout} ref={this.formRef} name="control-ref" >
				    		<Form.Item name="qq" label="发票抬头：" rules={[{ required: true }]}>
					          <Input placeholder="请输入发票抬头" />
					        </Form.Item>
					        <Form.Item name="wx" label="纳税人识别号：" rules={[{ required: true }]} extra="请填写15到20位有效税务登记证号或三证合一后到社会信用代码。">
					          <Input placeholder="请输入纳税人识别号"/>
					        </Form.Item>
					        <Form.Item name="nc" label="对公账户：" rules={[{ required: true }]}>
					          <Input placeholder="请输入您的对公账户"/>
					        </Form.Item>
					        <Form.Item name="nc1" label="开户地址：" rules={[{ required: true }]}>
					          <Input placeholder="请输入您的开户地址"/>
					        </Form.Item>
					        <Form.Item name="nc2" label="注册地址：" rules={[{ required: true }]}>
					          <Input placeholder="请输入您营业执照注册地址"/>
					        </Form.Item>
							<Form.Item name="nc3" label="联系电话：" rules={[{ required: true }]}>
					          <Input placeholder="请输入您的联系电话"/>
					        </Form.Item>
					        <Form.Item wrapperCol={{ offset: 5, span: 19 }}>
					        	<Button type="primary" >立即保存</Button>
					        	<Button type="primary" style={{marginLeft: 10}}>重置</Button>
					        </Form.Item>
				    	</Form>
				    </div>
			    </Modal>
			</>
		)
	}
}

class Invoice extends React.Component{
	state = {
		confirmLoading: false
	}
	formRef = React.createRef<FormInstance>();
	render(){
		const { visible } = this.props;
		const { confirmLoading } = this.state;
		return (
			<>
				<Modal
			        title="管理邮寄地址"
			        visible={visible}
			        width="700px"
			        onOk={() => { this.props.onCancel() }}
			        confirmLoading={confirmLoading}
			        onCancel={() => { this.props.onCancel() }}
			        footer={null}
			    >
				    <div style={{padding: '30px 30px'}}>
				    	<Form {...layout} ref={this.formRef} name="control-ref" >
				    		<Form.Item name="qq" label="发票抬头：" rules={[{ required: true }]}>
					          <Input placeholder="请输入发票抬头" />
					        </Form.Item>
					        <Form.Item name="wx" label="纳税人识别号：" rules={[{ required: true }]} extra="请填写15到20位有效税务登记证号或三证合一后到社会信用代码。">
					          <Input placeholder="请输入纳税人识别号"/>
					        </Form.Item>
					        <Form.Item name="nc" label="收件人姓名：" rules={[{ required: true }]}>
					          <Input placeholder="请输入收件人姓名"/>
					        </Form.Item>
					        <Form.Item name="nc1" label="收件人手机：" rules={[{ required: true }]}>
					          <Input placeholder="请输入收件人手机"/>
					        </Form.Item>
					        <Form.Item name="nc2" label="收件人地址：" rules={[{ required: true }]}>
					          <Input placeholder="请输入收件人地址"/>
					        </Form.Item>
							<Form.Item name="nc2" label="电子邮件：" rules={[{ required: true }]}>
					          <Input placeholder="请输入您的电子邮件"/>
					        </Form.Item>
					        <Form.Item wrapperCol={{ offset: 5, span: 19 }}>
					        	<Button type="primary" >立即保存</Button>
					        	<Button type="primary" style={{marginLeft: 10}}>重置</Button>
					        </Form.Item>
				    	</Form>
				    </div>
			    </Modal>
			</>
		)
	}
}


export default class Message extends React.Component{
	state = {
		invoicingVisible: false,
		invoiceVisible: false
	}
	render(){
		const {invoicingVisible, invoiceVisible} = this.state;
		return (
			<div style={{height: '100%',background: '#fff',padding: '12px 24px 24px'}}>
				<Card title="发票管理" bordered={false} style={{ width: '100%' }}>
					<Row>
						<Col span={12}>
							<Descriptions column={1}>
								<Descriptions.Item label="发票开票流程">
									<Steps size="small" current={4}>
									    <Step title="申请开票" />
									    <Step title="财务开票" />
									    <Step title="寄出发票" />
									    <Step title="线下签收" />
									</Steps>
								</Descriptions.Item>
							</Descriptions>
						</Col>
					</Row>
					<div className={styles.ul_item}>
						<div className={styles.li_item}>
							<div className={styles.title}>
								可开票金额

								<span style={{marginLeft: 10}}>
								<Tooltip title="开票金额：按实际已消耗的金额开票，而不是按充值金额开票。">
									<QuestionCircleOutlined />
									</Tooltip>
								</span>
								
							</div>
							<div className={styles.number}>
								<span style={{float: 'left'}}>35.00 元</span>
								<Button style={{float: 'left',margin: '10px 0 0 10px'}} type="primary">申请开票</Button>
							</div>
						</div>
						<div className={styles.li_item}>
							<div className={styles.title}>
								开票信息
							</div>
							<div className={styles.descriptions}>
								<label style={{color: '#74777c',marginRight: 10}}>发票抬头</label>
								<span>河北悦思智信科技有限公司</span>
							</div>
							<div className={styles.descriptions}>
								<label style={{color: '#74777c',marginRight: 10}}>纳税人识别号</label>
								<span>91130728MA09YUME7E</span>
							</div>
							<div className={styles.btn}>
								<a type="link" onClick={() => this.setState({invoicingVisible: true})}>修改开票信息</a>
							</div>
						</div>
						<div className={styles.li_item}>
							<div className={styles.title}>
								邮寄信息
							</div>
							<div className={styles.descriptions}>
								<span>王学伟 13293350909</span>
							</div>
							<div className={styles.descriptions}>
								<span>张家口市桥西区沈家屯镇五金机电城6号楼423室</span>
							</div>
							<div className={styles.btn}>
								<a type="link" onClick={() => this.setState({invoiceVisible: true})}>管理邮寄地址</a>
							</div>
						</div>
					</div>
					<div style={{padding: '40px 0'}}>
						<Table dataSource={dataSource} columns={columns} pagination={false}/>
					</div>
					
					<Alert style={{marginBottom: 10}} message="1. 目前只支持纸质发票，暂不支持电子发票。在您提交开票申请后，我们将在5个工作日内为您开票并用顺丰快递邮寄给您（不包括快递运输时间），请您耐心等待。" type="info" showIcon />
					<Alert style={{marginBottom: 10}} message="2. 所有订单都可开票, 开具的发票内容为信息技术、网络营销服务费。" type="info" showIcon />
					<Alert style={{marginBottom: 10}} message="3. 消费满2000元可申请开票。" type="info" showIcon />
					<Alert style={{marginBottom: 10}} message="4. 开具增值税专用发票，仅支持对公打款。" type="info" showIcon />
				</Card>
				<Invoicing onCancel={() => {this.setState({invoicingVisible: false})}} visible={invoicingVisible} />
				<Invoice onCancel={() => {this.setState({invoiceVisible: false})}} visible={invoiceVisible} />
			</div>
		)
	}
}